
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>memorandum</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" href="JS/bootstrap-3.3.7-dist/css/bootstrap.css">
</head>
<body>
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">通讯录</a>
            </div>
            <div class="collapse navbar-collapse" id="collapse-1">
                <form class="navbar-form navbar-left">
                    <div class="form-group">
                        <input type="text" name="search" class="form-control form-search" placeholder="请输入要搜索的内容">
                    </div>
                    <button type="button" class="btn btn-default btn-search">搜索</button>
                </form>
            </div>
        </div>
    </nav>

    <div class="container">
        <form class="form-contact">
            <div class="form-group">
                <label for="name">姓名</label>
                <input type="text" class="form-control" name="name" placeholder="请输入姓名">
            </div>
            <div class="form-group">
                <label for="phone">电话</label>
                <input type="tel" class="form-control" name="phone" placeholder="请输入电话">
            </div>
            <div class="form-group">
                <label for="email">邮箱</label>
                <input type="email" class="form-control" name="email" placeholder="请输入电话">
            </div>
            <div class="form-group">
                <button type="submit" class="btn btn-default btn-save">保存</button>
            </div>
        </form>

        <div class="table-responsive">
            <table class="table table-hover table-striped table-bordered table-contact">
                <thead>
                    <tr>
                        <th>姓名</th>
                        <th>电话</th>
                        <th>邮箱</th>
                        <th>操作</th>
                    </tr>
                    <tr style="display: none" id="moban-tr">
                        <td>{{v.name}}</td>
                        <td>{{v.phone}}</td>
                        <td>{{v.email}}</td>
                        <td>
                            <button class='btn btn-danger btn-sm delete'>删除</button>
                            <button class='btn btn-danger btn-sm edit'>修改</button>
                        </td>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
    
    <div class="modal fade" id="edit-form" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">修改</h4>
                </div>
                <div class="modal-body">
                    <form class="modal-contact">
                        <div class="form-group">
                            <label for="modal-name">姓名</label>
                            <input type="text" class="form-control" name="name" id="modal-name" placeholder="请输入姓名">
                        </div>
                        <div class="form-group">
                            <label for="modal-phone">电话</label>
                            <input type="tel" class="form-control" name="phone" id="modal-phone" placeholder="请输入电话">
                        </div>
                        <div class="form-group">
                            <label for="modal-email">邮箱</label>
                            <input type="email" class="form-control" name="email" id="modal-email" placeholder="请输入电话">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary btn-edit">保存修改</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="delete-confirm" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">温馨提示</h4>
                </div>
                <div class="modal-body">
                    <p>您确定要删除这条数据吗？</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary btn-sure">确定</button>
                </div>
            </div>
        </div>
    </div>
    
    <script src="JS/jquery-1.11.3.min.js"></script>
    <script src="JS/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <script src="JS/jquery.cookie.js"></script>
    <script src="JS/template-web.js"></script>
    <script type="text/html" id="contact-template">
        {{each list v i}}
        <tr>
            <td>{{v.name}}</td>
            <td>{{v.phone}}</td>
            <td>{{v.email}}</td>
            <td>
                <button class='btn btn-danger btn-sm delete'>删除</button>
                <button class='btn btn-danger btn-sm edit'>修改</button>
            </td>
        </tr>
        {{/each}}
    </script>
    
    <script>
    jQuery(function ($) {
        var dataAll = localStorage.getItem("contact");
        dataAll = JSON.parse( dataAll || "[]" );

        var tbody = $(".table-contact tbody");

        var htmlStr = template("contact-template", {list: dataAll});
        tbody.html(htmlStr);
        

        $(".btn-save").on("click", function(e){
            e.preventDefault();
            //            jquery的一个方法 序列化表单
            var val = $(".form-contact").serialize();
            console.log(val, typeof val);
            
            var obj = parseQueryString(val);
            console.log(obj);
            
            dataAll.push(obj);
            localStorage.setItem("contact", JSON.stringify(dataAll));
            
            
            var htmlStr = template("contact-template", {list: [obj]});
            tbody.append(htmlStr);
        })
        
        // 保存 修改
        $(".btn-edit").on("click", function(){
            var val = $(".modal-contact").serialize();
            var obj = parseQueryString(val);
            
            var tr = $("#edit-form").data("tr");

            dataAll.splice(tr.index(), 1, obj);
            localStorage.setItem("contact", JSON.stringify(dataAll));

            var newtr = template("contact-template", {list: [obj]});
            tbody.children().eq(tr.index()).replaceWith(newtr);

            $("#edit-form").modal("hide");
        })

        // 删除
        tbody.on("click", ".delete", function(){
            $("#delete-confirm").modal();
            $(".btn-sure").data("tr", $(this).closest("tr"));
        })

        // 修改
        .on("click", ".edit", function(){
            $("#edit-form").data("tr", $(this).closest("tr")).modal();
        })
        
        $("#edit-form").on("show.bs.modal", function(){
            var tr = $(this).data("tr");
            var data = dataAll[tr.index()];
            $("#modal-name").val(data.name);
            $("#modal-phone").val(data.phone);
            $("#modal-email").val(data.email);
        })

        // 删除确定
        $(".btn-sure").on("click", function(){
            var tr = $(this).data("tr");
            dataAll.splice(tr.index(), 1);
            localStorage.setItem("contact", JSON.stringify(dataAll));
            tr.remove();
            $("#delete-confirm").modal("hide");
        })
        



        function parseQueryString(str) {
            var obj = {};
            str.split("&").forEach(function(v){
                v = v.split("=");
                obj[ v[0] ] = decodeURIComponent( v[1] );
            })
            return obj;
        }
    })
    </script>
</body>
</html>